<template>
<div class="header">
	<div class="header1">
		<a href="###" class="icon icon-settings"></a>
		<a href="###" class="icon icon-message"></a>
	</div>
	<div class="header2">
		<div class="header2-img">
			<img v-if="touxiang" src="../images/tx.png">
			<img v-else src="../../../assets/tx.jpg" >
		</div>
		<div class="header2-login">
			<router-link to="/login">登录</router-link>
			<router-link to="/zc">/注册</router-link>
			<a href="javascript:void(0)" v-on:click="tuichuFn">/退出</a>	
		</div>
	</div>
	<!-- <div class="banner content-padded grid-demo"> -->
	<div class="banner grid-demo row">
		<div class="banner-33 col-33">
			<p>-</p>
			<p>
				账户余额
			</p>
		</div>
		<div class="col-33">
			<p>-</p>
			<p>
				优惠券
			</p>
		</div>
		<div class="col-33 ">
			<p>-</p>
			<p>
				悠币
			</p>
		</div>
	</div>
	<!-- </div> -->
</div>
</template>
<style type="text/css">
	.header{
		background: #5cdb9c;
		color: white;
	}	
	.header1{
		padding-top: 0.5rem;
		width: 20%;
		float: right;
	}
	.header1 a{
		width: 50%;
		float: left;
	}
	.header2{
		margin-left: 1rem;
		padding-top: 2rem;
		/*height: 8rem;*/
		padding-bottom: 6rem;
		/*overflow: hidden;*/
		clear: both;
	}
	.header2-img{
		width: 3.5rem;
		height: 3.5rem;
		border: 0.15rem solid #72e5a8;
		border-radius: 50%;
		padding-top: 0.8rem;
		background: white;
		text-align: center;
	}
	.header2-img img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.header2-login{
		padding: 1rem;
		padding-top: 1.2rem;
	}
	.header2 div{
		float: left;
	}
	.header2-login a{
		color: white;
	}
	.header .banner{
		color: white;
		margin: 0;
		width: 100%;
		height: 3rem;
		border-top: 0.01rem solid white;
		border-bottom:0.01rem solid green;
	}
	.banner .col-33{
		text-align: center;
		margin-top: 0.25rem;
		font-size: 0.5rem;
		/*margin-left: 0;*/
		height: 2.5rem;
		border-right: 0.01rem dashed white;
	}
	.banner .col-33:nth-child(3){
		border-right: none;
	}
	.banner-33 p{
		width: 80%;
	}
</style>
<script type="text/javascript">
	export default {
		// props:["title"]
		data:function(){
			return{
				touxiang:true,
			}
			
		},
		mounted(){
			if(getCookie().userName==true){
				this.touxiang=false;
		    }
			
		},
		methods:{
			tuichuFn:function(){
				removeCookie("userName");
				this.touxiang=true;
			}
		}
	}
</script>
<style>
	
</style>